<template>
  <div class="detail-container">
    <detail-box title="创建信息">
      <div class="detail-info">
        <div class="detail-li" >
          <manufactSelect @change="changeSelect" :disabled="isDisabled"/><div @click="goUser" class="create">创建</div>
        </div>
        <div class="detail-li" >
          <label>点播流名称 ：</label>
          <el-input v-model="form.StreamID" :disabled ="isDisabled"/>
        </div>
        <div class="detail-li" >
          <label>文件url ：</label>
          <el-input v-model="form.VideoUrl" :disabled ="isDisabled"/>
        </div>
        <div class="detail-li">
          <el-button :loading="loading" @click="getPushFn">创建点播</el-button>
        </div>
      </div>
    </detail-box>
  </div>
</template>
<script lang="ts" >
import { defineComponent, ref, getCurrentInstance } from "vue";
import { useRouter } from 'vue-router';
import DetailBox from '@/components/detail-box/index.vue';
import ManufactSelect from '@/components/manufact-select/index.vue';
import md5 from 'js-md5';
import dayjs from 'dayjs'
import axios from "axios";
import { ElMessage } from "element-plus";

export default defineComponent({
  components:{
    DetailBox,
    ManufactSelect
  },
  setup() {
    const instance: any = getCurrentInstance();
    const GL = instance.appContext.config.globalProperties;
    const router = useRouter()
    const isDisabled = ref(false)
    const loading = ref(false)
    let nowDate;
    let TimeStamp;
    let apiBase = process.env.VUE_APP_API_BASE_URL || '';
    const form :any = ref({
      StreamID: '',
      ServiceID: ''
    })
    let objItem;
    const changeSelect = (val) => {
      objItem = val;
      form.value.ServiceID = val.ServiceID;
    }
    const goUser = () => {
      router.push({
        path: '/manufacturer-detail',
      })
    }
    const getPushFn = async() => {
      const ref = /[^a-zA-Z0-9_]+/g
      if(ref.test(form.value.StreamID)) {
        return ElMessage.error('只允许输入数字和字母')
      }
      nowDate = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss');
      TimeStamp = dayjs(nowDate).unix();
      if(form.value.StreamID !== '' && form.value.ServiceID !== '' ) {
        const {StreamID, ServiceID, VideoUrl} = form.value
        loading.value = true;
        await axios({
          method: 'get',
          url: GL.$api.video.UploadVodVideo,
          params: {StreamID,VideoUrl, ServiceID,TimeStamp},
          baseURL: location.protocol === 'http:'? apiBase.replace('https:', 'http:'): apiBase,
          headers: {
            ZDAN_Token: md5(objItem.Passwd + StreamID + TimeStamp )
          },
          timeout: 30 * 1000,
        }).then((res: any) => {
          const data = res.data
          if (data.Code === 0) {
            isDisabled.value = true
            loading.value = false;
            router.go(-1);
          }
        }).catch((err: any) => {
          console.log(err);
          isDisabled.value = false
          loading.value = false;
        });
      }
    }
    
    return {
      goUser,
      changeSelect,
      form,
      isDisabled,
      loading,
      getPushFn,
    }
  }
})
</script>
<style lang="scss" scoped>
.detail-container{
  .detail-info{
    .detail-li{
      display: flex;
      height: 40px;
      line-height: 40px;
      align-items: center;
      margin-bottom: 20px;
      div{
        width: 33%;
        display: flex;
        align-items: center;
        span{
          margin-left: 20px;
          color: #409eff;
          cursor: pointer;
          text-decoration: underline;
        }
      }
      .create{
        cursor: pointer;
        text-decoration: underline ;
        color: #409eff;
      }
      label{
        width: 120px;
      }
    }
  }
  .copy{
    cursor: pointer;
  }
 .createUrl{
  line-height: 40px;
  font-size: 14px;
 }
}
</style>